<template>
	<view class="content mainpadding" v-if="pageShow">
		<view class="flexbetween">
			<view class="titletext xiaohong bold" v-show="dataAll.status==1">開具失敗</view>
			<view class="titletext xiaolv bold" v-show="dataAll.status==2">開具成功</view>
			<view class="titletext xiaohong bold" v-show="dataAll.status==3">作廢成功</view>
			<text class="weikai" v-if="dataAll.is_ly==1">未列印</text>
			<text class="yikai" v-if="dataAll.is_ly==2">已列印</text>
		</view>
		<view class="ffffff mainpadding margin_top border2 dingwei">
			<view class="flexbetween">
				<view>
					<view class="color_ling text_w">{{dataAll.shop.name}}</view>
					<view class="flexleft margin_top">
						<view class="xiaohei text_five bold">統編：{{dataAll.shop.serialnum}}</view>
					</view>
				</view>
				<image class="invoiceImg" :src="dataAll.shop.logoimage_text" mode=""></image>
			</view>
			<view class="flexleft margin_top1">
				<view class="xiaohei text_five bold">{{dataAll.shop.address}}</view>
			</view>
			<image src="@/static/images/system/zhongjiang.png" v-if="dataAll.is_zj==1" style="width: 160rpx;height: 130rpx;position: absolute;bottom: -70rpx;right: 10rpx;" mode=""></image>
		</view>
		<view class="ffffff mainpadding border2 margin_top">
			<view class="flexbetween margin_top">
				<view class="titletext bold xiaohei">{{dataAll.OrderId}}</view>
				<view class="text_b color_six">{{dataAll.createtime_text}}</view>
			</view>
			<view class="flexbetween line_b margin_top2" style="padding-bottom: 30rpx;">
				<!-- <view class="color_theme text_b">{{returnfplx(dataAll.type)}}：{{dataAll.CarrierId1}}</view> -->
				<view class="xiaolan main_size bold lanlable" v-show="dataAll.type==0">紙本</view>
				<view class="xiaolan main_size bold lanlable" v-show="dataAll.type==1">載具：{{dataAll.CarrierId1}}</view>
				<view class="xiaolan main_size bold lanlable" v-show="dataAll.type==2">統編：{{dataAll.BuyerIdentifier}}</view>
				<view class="xiaolan main_size bold lanlable" v-show="dataAll.type==3">捐贈：{{dataAll.NPOBAN}}</view>
				<view class="xiaolan main_size bold">發票號碼：{{dataAll.invoice_number}}</view>
			</view>
			<view class="flexleft margin-top bold" style="width: 100%;">
				<view class="xiaohei titletext" style="width: 60%;">品名</view>
				<view class="xiaohei titletext flexcenter" style="width: 20%;">數量</view>
				<view class="xiaohei titletext flexright" style="width: 20%;">金額</view>
			</view>
			<view class="pdl">
				<view class="flexleft margin-top bold" style="width: 100%;" v-for="item in dataAll.ProductItem" :key="item.id">
					<view class="xiaohei titletext xiankuan" style="width: 60%;">{{item.Description}}</view>
					<view class="xiaohei main_size flexcenter bold" style="width: 20%;">*{{item.Quantity}}</view>
					<view class="color_theme main_size flexright bold" style="width: 20%;">{{item.Amount}}TX</view>
				</view>
			</view>
			<view class="flexright margin_top">
				<view class="bold" style="margin-right: 150rpx;">
					合計：
					<text class="price color_theme">{{dataAll.ProductItem.length}}項</text>
				</view>
				<view class="bold">
					銷售額：
					<text class="price color_theme">${{dataAll.SalesAmount1}}元</text>
				</view>
			</view>
			<view class="flexright margin_top bold">
				<view>
					稅金：
					<text class="price color_theme">${{dataAll.TaxAmount1}}元</text>
				</view>
			</view>
			<view class="flexright margin_top bold">
				<view>
					<text style="font-size: 36rpx;">總計：</text>
					<text class="price color_theme">${{dataAll.TotalAmount}}元</text>
				</view>
			</view>
		</view>
		<view class="footer"  v-show="returnDownShow()">
			<view class="footerButton" @click="xiazai">下載發票</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid: "",
				dataAll: {},
				pageShow:false
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.getDetail()
		},
		methods: {
			returnDownShow(){
				if(this.dataAll.status==2){
					if(this.dataAll.type==0 && this.dataAll.is_download==0){
						return true
					}
					if(this.dataAll.type==1 && this.dataAll.is_zj==1 && this.dataAll.is_download==0){
						return true
					}
					if(this.dataAll.type==2 || this.dataAll.type==3){
						return true
					}
				}
			},
			returnfplx(val){
				if(val==0)return "紙本"
				if(val==1)return "載具"
				if(val==2)return "統編"
				if(val==3)return "捐贈"
			},
			xiazai(){
				let url = '/api/user/downloadFile'
				httpRequest.request(url, 'GET', {
					id: this.listid,
				}, false, false, true).then(res => {
					if(res.code==1){
						var iframe = document.createElement('iframe');
						iframe.style.display = 'none';
						iframe.src = "javascript: '<script>location.href=\"" + res.data.tbinfo + "\"<\/script>'";
						document.getElementsByTagName('body')[0].appendChild(iframe);
						this.getDetail()
					}else{
						httpRequest.toast(res.msg)
					}
					
				})
			},
			getDetail() {
				let data = {
					id: this.listid,
				}
				let url = '/api/user/userFpDetail'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					this.dataAll = res.data
					this.pageShow = true
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pdl{
		border-bottom: 2rpx dashed #333;
	}
	.weikai{
		border-radius: 0 10rpx 0 10rpx;
		background-color: rgba(153, 153, 153, .1);
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999;
		padding: 5rpx 30rpx;
	}
	.yikai{
		border-radius: 0 10rpx 0 10rpx;
		background-color: #50a6a3;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		padding: 5rpx 30rpx;
	}
	.invoiceImg {
		width: 120rpx;
		height: 120rpx;
		min-width: 120rpx;
		border-radius: 50%;
	}

	.color_theme {
		color: #FF5C00 !important;
	}

	.goodsImg {
		width: 124rpx;
		height: 124rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	.pirce {
		font-size: 30rpx;
		font-family: DIN Next LT Pro-Regular, DIN Next LT Pro;
		font-weight: 400;
		color: #666666;
	}
</style>